<style lang="less">
@import "@/styles/table-common.less";
.info {
  margin-bottom: 15px;
  ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    li {
      width: 25%;
      padding: 5px 0;
    }
  }
}
// 1395939652812279808
</style> 

<template>
  <div class="search">
    <Card>
      <!-- <Row class="operation">
        <Button @click="add" type="primary" icon="md-add">添加</Button>
      </Row> -->
      <Form ref="searchForm" :model="searchForm" inline :label-width="100">
        <Row @keydown.enter.native="handleSearch">
          <FormItem label="姓名">
            <Input
              type="text"
              v-model="searchForm.realName"
              clearable
              placeholder="请输入姓名"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="手机号">
            <Input
              type="text"
              v-model="searchForm.mobile"
              clearable
              placeholder="请输入手机号"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="身份类型选择">
            <Select
              v-model="searchForm.parkRoleType"
              transfer
              placeholder="请选择"
              style="width: 200px"
            >
              <Option
                v-for="item in scParkRoleList"
                :key="item.id"
                :value="item.parkRoleType"
                >{{ item.title }}</Option
              >
            </Select>
          </FormItem>
          <FormItem style="margin-left: -35px" class="br">
            <Button @click="handleSearch" type="primary" icon="ios-search"
              >搜索</Button
            >
            <Button @click="handleReset">重置</Button>
          </FormItem>
        </Row>
      </Form>
      <!-- <div style="margin-bottom: 10px; display: flex">
        <Upload
          :action="importExcel"
          :headers="{ accessToken: accessToken }"
          :on-success="handleSuccess"
          :show-upload-list="false"
          accept=".xls, .xlsx"
        >
          <Button
            :loading="reading"
            icon="ios-cloud-upload-outline"
            style="margin-right: 10px"
            >导入Excel文件</Button
          >
        </Upload>

        <Button
          @click="addMoneyByIdsbatch"
          type="primary"
          style="margin-left: 10px"
          >批量增加余额</Button
        >
      </div> -->

      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="data"
        sortable="custom"
        ref="table"
        @on-selection-change="showSelect"
      >
        <template slot-scope="{ row }" slot="parkRoles">
          <Avatar
            v-for="item in row.parkRoles"
            :key="item"
            shape="square"
            :src="item.icon"
          />
          <!-- <Tag color="success" v-for="item in row.parkRoles" :key="item">{{item.parkRoleId | scParkRoleType(scParkRoleList)}}</Tag> -->
        </template>
      </Table>
      <Row type="flex" justify="end" class="page">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <!-- <addEdit
      :data="form"
      :type="showType"
      :companyId="companyId"
      v-model="showUser"
      @on-submit="getDataList"
    /> -->
    <Modal
      v-model="showSetCompany"
      title="修改企业"
      @on-ok="resetCompany"
      @on-cancel="cancel"
    >
      <div>
        <Select v-model="SetCompanyId">
          <Option
            v-for="item in allcompanyList"
            :value="item.id"
            :key="item.id"
            >{{ item.companyName }}</Option
          >
        </Select>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  // getScCompanyById,
  getScUserByCondition,
  getScParkRoleAll,
  importExcel,
  addMoneyByIds,
  scUserUpdStatusById,
  scCompanyKickOut,
  getScCompanyAllCompany,
  editCompany
} from "@/api/index";

// import addEdit from "./addEdit.vue";
export default {
  name: "company-info",
  components: {
    // addEdit,
  },
  data() {
    return {
      allcompanyList: [],
      currentSetCompany: {},
      SetCompanyId:"",
      showSetCompany: false,
      addIntegral: "", //添加余额
      selectList: [],
      accessToken: this.getStore("accessToken"),
      importExcel: importExcel,
      message: "",
      height: 510,
      showUser: false,
      showType: "0",
      loading: true,
      searchForm: {
        pageNumber: 1,
        pageSize: 10,
        sort: "createTime",
        order: "desc",
      },
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left",
        },
        {
          title: "姓名",
          key: "realName",
          minWidth: 220,
          align: "center",
          fixed: "left",
          render: (h, params) => {
            let nodeTxt = h(
              "a",
              {
                on: {
                  click: () => {
                    this.gotoPersonInfo(params.row);
                  },
                },
              },
              params.row.realName
            );
            return h("div", [nodeTxt]);
          },
        },
        {
          title: "昵称",
          key: "nickname",
          width: 140,
          align: "center",
        },
        {
          title: "余额",
          key: "nowMoney",
          width: 140,
          align: "center",
        },
        {
          title: "手机号",
          key: "mobile",
          minWidth: 220,
          align: "center",
          render: (h, params) => {
            let nodeTxt = h(
              "a",
              {
                on: {
                  click: () => {
                    this.gotoPersonInfo(params.row);
                  },
                },
              },
              params.row.mobile
            );
            return h("div", [nodeTxt]);
          },
        },
        {
          title: "身份证号",
          key: "idCard",
          width: 220,
          align: "center",
        },
        {
          title: "登录用户名",
          key: "username",
          width: 220,
          align: "center",
        },
        {
          title: "用户身份",
          key: "parkRoles",
          width: 220,
          align: "center",
          slot: "parkRoles",
        },
        {
          title: "创建时间",
          key: "createTime",
          width: 220,
          align: "center",
        },
      
        {
          title: "启用状态",
          key: "status",
          width: 100,
          align: "center",
          render: (h, params) => {
            if (params.row.status == 0) {
              return h("div", [
                h("Badge", {
                  props: {
                    status: "success",
                    text: "启用",
                  },
                }),
              ]);
            } else if (params.row.status == -1) {
              return h("div", [
                h("Badge", {
                  props: {
                    status: "error",
                    text: "禁用",
                  },
                }),
              ]);
            }
          },
          // filters: [
          //   {
          //     label: "启用",
          //     value: 0,
          //   },
          //   {
          //     label: "禁用",
          //     value: -1,
          //   },
          // ],
          // filterMultiple: false,
          filterRemote: (e) => {
            let v = "";
            if (e.length > 0) {
              v = e[0];
            }
            this.searchForm.status = v;
            this.searchForm.pageNumber = 1;
            this.getDataList();
          },
        },
        {
          title: "操作",
          key: "createTime",
          width: 150,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            let enableOrDisable = "";
            let setcompany = h(
              "a",
              {
                on: {
                  click: () => {
                    this.setCompany(params.row);
                  },
                },
              },
              "修改企业"
            );
            if (params.row.status == 0) {
              enableOrDisable = h(
                "a",
                {
                  on: {
                    click: () => {
                      this.chageable(params.row, -1);
                    },
                  },
                },
                "禁用"
              );
            } else {
              enableOrDisable = h(
                "a",
                {
                  on: {
                    click: () => {
                      this.chageable(params.row, 0);
                    },
                  },
                },
                "启用"
              );
            }
            return h("div", [
              enableOrDisable,
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              setcompany,
            ]);
          },
        },
      ],
      data: [],
      // companyInfo: {},
      // adminInfo: {},
      // companyId: '',
      scParkRoleList: [],
    };
  },
  methods: {
    resetCompany() {
      editCompany({
        uid:this.currentSetCompany.id,
        companyId:this.SetCompanyId
      }).then((res) => {
          console.log(res);
          if (res.success) {
            this.showSetCompany = false;
            this.getDataList()
          }
        });
    },
    setCompany(item) {
      console.log(item)
      this.currentSetCompany = item;
      this.SetCompanyId = item.companyId
      if (this.allcompanyList.length) {
        this.showSetCompany = true;
      } else {
        getScCompanyAllCompany({}).then((res) => {
          console.log(res);
          if (res.success) {
            this.allcompanyList = res.result;
            this.showSetCompany = true;
          }
        });
      }
    },
    showSelect(e) {
      this.selectList = e;
    },

    addMoneyByIdsbatch() {
      if (this.selectList.length <= 0) {
        this.$Message.warning("您还未选择要添加的数据");
        return;
      }
      this.$Modal.confirm({
        title: "确定要给选中的人员添加余额？",
        render: (h) => {
          return h("Input", {
            props: {
              value: this.addIntegral,
              autofocus: true,
              type: "number",
              placeholder: "请输入要添加的余额",
            },
            on: {
              input: (val) => {
                this.addIntegral = val;
              },
            },
          });
        },
        onOk: () => {
          let ids = "";
          this.selectList.forEach(function (e) {
            ids += e.id + ",";
          });
          ids = ids.substring(0, ids.length - 1);
          // 批量添加余额
          addMoneyByIds({ ids: ids, money: this.addIntegral }).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.$refs.table.selectAll(false);
              this.getDataList();
            }
          });
        },
      });
    },
    handleSuccess() {
      this.$Message.success("上传成功");
      this.getDataList();
    },
    init() {
      this.getScParkRoleAllData();
      // this.getScCompanyByIdData()
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    getDataList() {
      // 多条件搜索用户列表
      this.loading = true;
      getScUserByCondition({ ...this.searchForm }).then((res) => {
        this.loading = false;
        if (res.success) {
          // this.data = res.result
          this.data = res.result.content;
          let data = res.result.content;
          if (data.length > 0) {
            data.forEach((item) => {
              item.parkRoles.forEach((parkRole) => {
                this.scParkRoleList.forEach((list) => {
                  if (parkRole.parkRoleId == list.id) {
                    parkRole.icon = list.icon;
                  }
                });
              });
            });
          }
          this.total = res.result.totalElements;
          if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
            this.searchForm.pageNumber -= 1;
            this.getDataList();
          }
        }
      });
    },
    add() {
      this.showType = "2";
      this.showUser = true;
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    chageable(v, status) {
      let statusTxt = status == 0 ? "启用" : "禁用";
      this.$Modal.confirm({
        title: `确认${statusTxt}`,
        content: `您确认要${statusTxt}` + v.realName + " ?",
        loading: true,
        onOk: () => {
          scUserUpdStatusById({ id: v.id, status }).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.getDataList();
            }
          });
        },
      });
    },
    remove(v) {
      let statusTxt = "踢出";
      this.$Modal.confirm({
        title: `确认${statusTxt}`,
        content: `您确认要${statusTxt}` + v.realName + " ?",
        loading: true,
        onOk: () => {
          scCompanyKickOut({ id: this.companyId, uid: v.scuid }).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.getDataList();
            }
          });
        },
      });
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    handleReset() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.searchForm.realName = "";
      this.searchForm.mobile = "";
      this.searchForm.parkRoleType = "";

      // 重新加载数据
      this.getDataList();
    },

    getScParkRoleAllData() {
      getScParkRoleAll()
        .then((res) => {
          if (res.success) {
            this.scParkRoleList = res.result;
            this.getDataList();
          }
        })
        .catch(() => {
          this.getDataList();
        });
    },
    gotoPersonInfo(val) {
      let obj = {
        ...val,
        scuid: val.id,
      };
      this.$router.push({ name: "person_info", params: obj });
    },
  },
  filters: {
    scParkRoleType(id, scParkRoleList) {
      let list = scParkRoleList.filter((item) => {
        return id == item.id;
      });
      if (list.length > 0) {
        return list[0].title;
      } else {
        return "";
      }
    },
  },
  created() {
    //  if(Object.keys(this.$route.params).length>0) {
    //     this.companyInfo = this.$route.params
    //     this.adminInfo = this.companyInfo.user || {}
    //     this.companyId = this.companyInfo.id
    //     localStorage.setItem('localStorage_companyInfo',JSON.stringify(this.$route.params))
    //   }else{
    //     this.companyInfo = JSON.parse(localStorage.getItem('localStorage_companyInfo'))
    //     this.adminInfo = this.companyInfo.user || {}
    //     this.companyId = this.companyInfo.id
    //   }
    this.init();
  },
  mounted() {
    // 计算高度
    this.height = Number(document.documentElement.clientHeight - 230);
  },
  // activated() {
  //   console.log(1111111111111)
  //   if(Object.keys(this.$route.params).length>0) {
  //     this.companyInfo = this.$route.params
  //     this.adminInfo = this.companyInfo.user || {}
  //     this.companyId = this.companyInfo.id
  //     localStorage.setItem('localStorage_companyInfo',JSON.stringify(this.$route.params))
  //   }else{
  //     this.companyInfo = JSON.parse(localStorage.getItem('localStorage_companyInfo'))
  //     this.adminInfo = this.companyInfo.user || {}
  //     this.companyId = this.companyInfo.id
  //   }
  //   this.init()
  // }
};
</script>